<template>
  <div class="login-rigsiter-container">
    <div class="login-rigsiter-box">
      <div class="login-rigsiter-bg"></div>
      <div class="login-rigsiter-form">
        <loginView v-if="isLogin">
          <template #default>
            <el-button
              style="margin-left: auto"
              link
              type="primary"
              @click="isLogin = !isLogin"
            >
              申请成为开发者
            </el-button>
          </template>
        </loginView>
        <registerView v-else>
          <template #default>
            <el-button
              style="margin-right: auto"
              link
              type="primary"
              @click="isLogin = !isLogin"
            >
              已成为开发者，去登录
            </el-button>
          </template>
        </registerView>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import loginView from "@/components/login-register/login/index.vue";
import registerView from "@/components/login-register/register/index.vue";
const isLogin = ref(true);
</script>

<style scoped>
.login-rigsiter-container {
  background-image: url(@/assets/img/GWLOGO1.png);
  background-size: cover;
  background-position: center; /* 图片中心对齐容器中心 */
  object-fit: cover;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-rigsiter-box {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  /* width: 50%;
  height: 50%; */
  width: 60%;
  height: 70%;
  background-color: rgba(255, 255, 255, 0.1);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  overflow: hidden;
}

.login-rigsiter-bg {
  /* background-image: url(@/assets/vue.svg); */
  background-size: cover;
  object-fit: cover;
  overflow: hidden;
}

.login-rigsiter-form {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(10px);
}
</style>
